.slid-seting{
    width: calc(~"100% - 20px");
    padding: 0 10px 20px 10px;
    position: absolute;
    left: 150%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #109544;
    border: 3px solid rgba(127, 130, 132, 100);
    font-size: 24px;
    .title{
        border-bottom: 1px solid rgba(187, 187, 187, 100);
        padding: 10px 0;
        margin-bottom: 20px;
    }
    .xl-text{
        cursor: pointer;
        margin-right: 20px;
    }
    .row-item{
        display: flex;
        align-items: center;
        .text{
            margin-right: 10px;
        }
    }
    .btn-item{
        display: flex;
        align-items: center;
        margin-top: 20px;
        font-size: 24px;
    }
}
.slid-seting.hidden{
    left: 150%;
    animation: slid-out 1s;
}
.slid-seting.visible{
    left: 50%;
    animation: slid-in 1s;
}
@keyframes slid-in
{
	0%   {left: 150%;}
	100% {left: 50%;}
}
@keyframes slid-out
{
	0%   {left: 50%;}
	100% {left: 150%;}
}